<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
        html,body,#app{
           height: 100%;
        }

        .el-header, .el-footer {
            background-color: #23262e;
            color: #333;
            text-align: center;
            line-height: 60px;
        }


        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        #app >.el-container {
            height: 100%;
        }

        .el-aside {
            background-color: #545c64;
            color: #333;
            height: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
        }

        .el-aside > .el-menu {
            border-right: none;
        }

        .el-aside > .el-menu > .el-menu-item > a {
            color: white;
            text-decoration: none;
            cursor: pointer;
        }
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            height: 100%;
        }
        .top_left>img{
            margin-left:-372px;
        }
        .el-form-item__label {
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            color: #606266;
            line-height: 102px;
            padding: 0 9px 0 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="top_left" style="float: left;width: 30%;">
                <img src="./imges/lo.gif" width="100px" >

            </div>
            <div class="top_center" style="font-size: 48px;color: #2b6265;text-align:center;float: left;width: 40%">
                移动图书系统
            </div>
            <div class="top_right" style="float: right;width: 30%;text-align: right">
                <el-avatar :src="userinfo.url"></el-avatar>
                <el-dropdown  @command="handleCommand">
                      <span class="el-dropdown-link">
                        {{userinfo.staffname}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="220px">
                <%--unique-opened:唯一打开。--%>
                <el-menu
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        :unique-opened="true"
                >
                    <el-submenu v-for="menu in leftMenus" :key="menu.menuId" :index="menu.menuId+''">
                        <template slot="title">
                            <i :class="menu.icon"></i>
                            <span>{{menu.menuName}}</span>
                        </template>

                        <el-menu-item   v-for="child in menu.children" :key="child.menuId" :index="child.menuId+''">
                            {{child.children.length}}
                                <i :class="child.icon"></i>
                                <a :href="child.menuUrl+'.jsp'" style="text-decoration: none;color: white;" target="main"> {{child.menuName}}</a>
                        </el-menu-item>

                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                 <iframe src="index.jsp" name="main" width="100%" height="100%" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </el-container>
    <el-dialog title="个人信息" :visible.sync="editDialogFormVisible" center width="50%">
        <el-form :model="addForm"  ref="aaa"  >
            <el-form-item label="头像" label-width="344px" >
                <el-image
                        style="width: 100px; height: 100px"
                        :src="userinfo.url"
                        @click="clickImage"
                        v-if="flg"
                ></el-image>

                <el-upload
                        :hidden="flg"
                        ref="upload"
                        @click="handleClick"
                        :background="userinfo.url"
                        class="avatar-uploader"
                        action="/upLoad/image"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
            <el-descriptions class="margin-top" :column="1" :size="size" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        用户名
                    </template>
                   {{userinfo.staffname}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{userinfo.phone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        身份证号
                    </template>
                    {{userinfo.idcard}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        居住地
                    </template>
                   {{userinfo.address}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        入职日期
                    </template>
                    {{userinfo.entrytime}}
                </el-descriptions-item>
                <%--<el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        职务名称
                    </template>
                   {{userinfo.roleid}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        部门名称
                    </template>
                    {{userinfo.deptid}}
                </el-descriptions-item>--%>
            </el-descriptions>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary"@click="editDialogFormVisible = false">返 回</el-button>
            <el-button type="primary" @click="edituser">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="password" center width="50%">
        <el-form :model="ruleForm" status-icon <%--:rules="rules" ref="ruleForm"--%> label-width="100px" class="demo-ruleForm">
            <el-form-item label="旧密码" prop="oldpass">
                <el-input type="password" v-model="ruleForm.oldpass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newpass">
                <el-input type="password" v-model="ruleForm.newpass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data:{
            size:'',
            //当前用户信息
            userinfo:{},
            //左侧菜单集合
            leftMenus:[],
            editDialogFormVisible:false,
            imageUrl:"",
            addForm:{},
            flg:true,
            password:false,
            ruleForm:{},
            resetForm:{},
        //     修改密码

        },
        created(){
             //加载当前用户的信息
             this.loadUserInfo();
             //加载左侧菜单
             this.leftMenu();
        },
        methods:{
            submitForm(){
                if(this.ruleForm.pass==this.ruleForm.newpass) {
                    axios.post("/login/ass/" + this.ruleForm.oldpass + "/" + this.ruleForm.newpass).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success("修改成功")
                            location.href='/login3.jsp'
                        } else if (res.data.code == 500) {
                            this.$message.error("修改失败")
                        }
                    })
                }else {
                    this.$message.error("两次密码不一致")
                }

            },
            edituser(){
                this.$refs.aaa.validate((valid) => {
                    if (valid) {
                        axios.post("/staff/update/",this.addForm).then(res => {
                            this.dialogFormVisible2 = false;
                            this.$message.success("修改成功")
                            this.loadTable()
                        })
                    }
                })
            },
             //加载左侧菜单
            leftMenu(){
               axios.get("/menu/leftMenu").then(result=>{

                   console.log("==========leftMenu==================")
                   console.log(result.data.data)
                   console.log("==========leftMenu========================")
                   this.leftMenus=result.data.data;

               })
            },
             loadUserInfo(){
                 axios.get("/staff/getInfo").then(result=>{
                        this.userinfo=result.data.data;
                 })
             },
            handleCommand(command) {
                if(command==="logout"){
                    axios.get("/login/exit").then(res=>{
                        if(res.data.code===200){
                            this.$message.success(res.data.msg);
                            location.href='/login3.jsp'
                        }
                    })

                }else if(command==="info"){
                    this.editDialogFormVisible=true;
                }else {
                    this.password=true;

                }
            },
            handleClick(){
                this.$refs.upload.$el.querySelector('input').click()
            },
            clickImage(){
                this.handleClick()
            },
            //上传图片成功
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.addForm.url=res.data;
            },
            //图片限制
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }

    })
</script>

</html>
